// 和用户管理有关的功能

// 引入二级路由的模板 

import usersView from '@/users.ejs';
// 引入 api模块 
import axios from  "../api/index.js";

let baseURL = axios.defaults.baseURL;
console.log(baseURL);


// 获取用户信息，渲染到页面上 
async function getdata(res,p = 1) {
    // 发送ajax 获取用户的信息
    // 获取数据的时候 更加 页码来获取 默认给一个页码 p = 1;
    let { data } = await axios.get("/user/getdata",{
        params:{
            p
        }
    });
    console.log(data);
    res.render(usersView({users:data.users,baseURL,pageCount:data.pageCount})); // 渲染 需要等到 数据获取之后再渲染 
}

// 绑定事件dom节点之后的事件
async function addEvent(res) {
    //点击添加用户
    // 一、点击按钮的时候，显示添加用户的对话框
    let addUserBtn = document.querySelector('.adduer');

    // 获取添加的对话框 
    let adduermodelEle = document.querySelector(".adduermodel");
    // 遮罩层元素
    let maskEle = document.querySelector(".mask");

    addUserBtn.onclick = function(){
        console.log("点击了");
        // 点击添加按钮的时候  让对话框和 遮罩层显示出来
        adduermodelEle.style.display = "block";
        maskEle.style.display = "block";
    }

    // 二 点击 关闭的时候 关闭 对话框 
    let  closebtnEle = document.querySelector(".closebtn");

    closebtnEle.onclick = function(){
        adduermodelEle.style.display = "none";
        maskEle.style.display = "none";
    }

    // 三 点击 提交按钮的时候  提交用户的信息 到后端。
    let imgFileEle = document.querySelector(".imgFile");
    let imgshowEle = document.querySelector(".imgshow")

    imgFileEle.onchange = function(){
        // input 发生改变的时候触发函数；
        console.log("发生改变了!!");
        // 获取上传的图片对象
        // 通过 input.files
        // console.log(this.files[0])
        let imgObj = this.files[0];
        let filerader = new FileReader();
        filerader.readAsDataURL(imgObj);  // 把图片对象转成url形式的数据，base64格式
        // 需要在filerader读完数据之后 获取base64
        filerader.onload = function(){
            // 读取完毕了，获取base64字符串
            console.log(filerader.result);
            let myimg = new Image(); // 创建一个img 标签
            myimg.src = filerader.result; // 设置图片的路径地址是获取到的base64的路径
            myimg.style.width = "100px";
            myimg.style.height = "100px";
            // 把图片的对象添加到html里
            imgshowEle.innerHTML = ""; // 请求显示的div里的内容
            imgshowEle.appendChild(myimg);


        }
    }

    // 点击提交按钮的时候 发送ajax
    let submitBtn = document.querySelector('.btn');
    let usernameEle = document.querySelector(".username");
    let pwdEle = document.querySelector(".pwd");
    let repeatpwdEle = document.querySelector(".repeatpwd");
    submitBtn.onclick = async function(){
        // 发送ajax 测试
        // 获取用户名和密码
        let username = usernameEle.value;
        let pwd = pwdEle.value;
        let repeatpwd = repeatpwdEle.value;
        // 获取文件对象
        // 获取文件对象
        let imgfile = imgFileEle.files[0]; // 文件对象
        // 表单的校验 
        if(username ==""){
            return alert("用户名不能为空")
        }

        if(pwd == ""){
            return alert("密码不能为空")
        }

        // 两次输入的密码要一致
        if(pwd!==repeatpwd){
            return alert("两次输入的密码不同");
        }

        // 文件不能是undefined
        if(typeof imgfile == 'undefined'){
            return alert("图像不能为空");
        }


        console.log(username,pwd,imgfile);

        // 借助 FormData 预定义类
        let form  = new FormData();  // 模拟一个空的form表单
        form.append("username",username) ;
        form.append("pwd",pwd);
        form.append("myimg",imgfile);
        // console.log(form);
        // 把form当成数据直接提交给后端 ，自动设置请求头部信息 
        let {data} = await axios.post("/user/adduser",form);
        if(data.status==1){
            // 需要把对话框隐藏起来
            alert("添加成功");
            adduermodelEle.style.display = "none";
            maskEle.style.display = "none";
            // 添加成功之后 要获取最新数据 在调用render方法渲染到页面上
            await getdata(res); // 调用ajax 获取最新的数据，然后再渲染到页面上
            await addEvent(res); // 绑定事件
        }

    }


        
            // console.log('点击了提交按钮');
            // let res = await axios.get('/user/getdata');
            // console.log(res);
  
    // 点击按钮删除用户的功能；
    // 获取所有的删除按钮 
    let delBtns = document.querySelectorAll(".delBtn");
    // 循环绑定事件
    delBtns.forEach(btn => {
        btn.onclick = async function () {
            console.log("点击了删除");
            // 点击删除按钮的时候 获取点击按钮的数据id的值；发送ajax给后端携带id的值
            // 获取这条数据的id
            let _id = this.getAttribute("myid");
            console.log(_id);
            // 发送ajax 把id 传递给后端 删除数据
            // 循环框
            let reslut = confirm("你确定要删除吗?");
            if (reslut) {
                // 发送ajax 然后再删除。数据库 通过更新代替删除，数据没有删除，只是查询数据的时候不查询处理，定期在把数据删除。
                let { data } = await axios.delete("/user/deluser", {
                    params: {
                        _id
                    }
                })
                console.log(data);  // 后端返还的结果值。
                if(data.status==1){
                    await getdata(res);  // 渲染视图 
                    await addEvent(res);  // 绑定事件
                }else{
                    console.log(data);
                }
            }
        }
    })
    // 分页逻辑 
    let pageEles = document.querySelectorAll(".pageContainer a");
    pageEles.forEach(pageEle => {
        pageEle.onclick = async function (e) {
            // 阻止 a的默认跳转行为
            e.preventDefault();
            // 获取当前点击的页码 ；
            let p = this.innerHTML;
            p = p.trim();
            // console.log("("+p.trim()+")");
            await getdata(res, p);
            await addEvent(res);


        }
    })

}




export default function (router) {
    router.route("/admin/users", async (req, res) => {
        await getdata(res);  // 渲染视图 
        await addEvent(res);  // 绑定事件
        // res.render(usersView());

    })

}
